<template>
	<view class="box">
		<view class="box-1">
			<view class="Top-title">
				<image :src="indentDataList[indentIndex].imgURL" mode=""></image>
				<view class="Top-title-right">
					<view class="op"> 去详情</view>
					<view class="Top-title-right-1">
						<text>58自营</text>
						<view class="Top-title-right-1-title">{{indentTitle}}</view>
					</view>
					<view class="Top-title-right-2">规范服务 24小时维权 加价退差价</view>
					<view class="Top-title-right-3">
						<text class="span">券后</text>
						<view class="red"><text>{{subPrice}}</text>元/{{time}}小时起</view>
						<view class="del">{{price}}元</view>
					</view>
				</view>
			</view>
			<view class="info iconfont">
				<view class="info-D flex" @click="GoToSite()">
					<view class="title-1 icon-ico_address color"></view>
					<view class="title once" v-if="ALLDataList[addressIndex]!=null">
						<view class="content ">{{ALLDataList[addressIndex].address}}
							{{ALLDataList[addressIndex].houseNumber}}
						</view>
						<view class="fz red" v-if="ALLDataList[addressIndex].address==''">*请补全信息</view>
						<view class="fz gray" v-else>
							{{ALLDataList[addressIndex].name}} {{ALLDataList[addressIndex].phone}}
						</view>
					</view>
					<view class="title-3 icon-youjiantou1"></view>
				</view>
				<view class="info-X" @click="serveClick">
					<view class="icon-service color"></view>
					<view class="title">选择服务</view>
					<view class="Ftitle">{{serveTltle}}</view>
					<view class="title-3 icon-youjiantou1"></view>
				</view>
				<view class="info-S" @click="serveTimeClick">
					<view class="icon-time color"></view>
					<view class="title">上门时间</view>
					<view class="Ftitle" v-if="parson[0].date==null">请选择时间</view>
					<view class="Ftitle" v-else>{{parson[0].date | changeServeTime}}
						{{parson[0].time}}
					</view>
					<view class="title-3 icon-youjiantou1"></view>
				</view>
				<view class="info-B" @click="demandClick">
					<view class="icon-beizhu- color"></view>
					<view class="title">备注</view>
					<view class="Ftitle" v-if="parson[0].demandValue==''">可填写特殊需求</view>
					<view class="Ftitle" v-else>{{parson[0].demandValue}}</view>
					<view class="title-3 icon-youjiantou1"></view>
				</view>
			</view>
			<view class="select iconfont">
				<view class="top">
					<view class="title">服务套餐</view>
					<view class="reminder">暂无可用</view>
					<text>
						<svg t="1631260625812" class="icon" viewBox="0 0 1024 1024" version="1.1"
							xmlns="http://www.w3.org/2000/svg" p-id="3333" width="20" height="20">
							<path d="M289.408 170.666667v83.029333H774.4v480.896H853.333333V170.666667z" p-id="3334"
								fill="#ffffff"></path>
							<path d="M170.666667 853.333333h563.925333V289.408H170.666667z" p-id="3335" fill="#ffffff">
							</path>
						</svg>
					</text>
					<view class="details">购买套餐本次可优惠14.6元</view>
					<view class="icon-youjiantou1"></view>
				</view>
				<view class="bottom">
					<view class="title">优惠</view>
					<view v-if="!Sle" class="sel">已选1张</view>
					<view class="discount">{{discountData[0]}}折券</view>
					<view class="icon-youjiantou1"></view>
				</view>
			</view>
			<view class="warm_prompt iconfont">
				<view class="left">
					<text class="title">温馨提示：</text>
					<text class="content">服务开始前120分钟可免费取消；不足120分钟取消订单平台将扣除您20%的支付金额（最多扣除30元）</text>
				</view>
				<view class="icon-youjiantou1"></view>
			</view>
			<view class="more iconfont">
				<view class="top">
					<view class="title">更多优惠</view>
					<view class="title-1">规则说明</view>
					<text class="icon-youjiantou1"></text>
				</view>
				<view class="bottom">
					<view class="car">
						<view class="top_right_corner">本次比不用套装优惠{{}}元</view>
						<view class="title">{{indentTitle}}{{time}}小时*5次套餐</view>
						<view class="title-1 color">本单可用 | 2021-12-18前有效 | 有效期内均可预约使用 | <br>限成都使用</view>
					</view>
					<view class="price">
						<view class="title">{{indentTitle}}{{time}}小时*5次</view>
						<view class="total">￥{{subPrice*5}}
							<br><text class="fz">原价￥{{price}}</text>
						</view>
						<view v-if="!radio_check" class="radio" @click="radio">
						</view>
						<view v-if="radio_check" class="radio radio1 iconfont" @click="radio"><svg t="1631270007272"
								class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
								p-id="3231" width="15" height="15">
								<path
									d="M530.432 517.632m-423.424 0a82.7 82.7 0 1 0 846.848 0 82.7 82.7 0 1 0-846.848 0Z"
									p-id="3232" fill="#FD562F"></path>
							</svg>
						</view>
					</view>
				</view>
			</view>
			<view class="indent-hint-box">
				<view class="flex">
					<view class="icon-good iconfont">
					</view>
					<view class="fz">
						疫情期间, 请您带好口罩, 勤洗手多通风; 阿姨将定期测温, 工具消毒, 服务过程中全程佩戴口罩
					</view>
				</view>
				<view class="center">
					<view @click="hintRadioClick">
						<text class="iconfont icon-yuan fz color fw" v-if="userDealFlag==false"></text>
						<text class="iconfont icon-iconfront- fz color fw" v-else></text>
						<text class="fz">本人知晓并同意</text>
					</view>
					<text class="color fz">《用户预约协议》</text>
				</view>
			</view>
		</view>
		<view class="box-2">
			<view class="pic" @click="bottomPriceClick">
				<view class="price">
					<view class="price-1">￥{{subPrice}}</view>
					<view class="price-2">明细</view>
					<view class="price-3"><svg t="1631264692636" class="icon" :class={bottomPriceActive:bottomPriceFlag}
							viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2570"
							width="10" height="10">
							<path
								d="M944.128 241.152c13.824 0 17.408 8.704 8.704 18.944l-424.448 508.928c-8.704 10.24-23.552 10.24-32.256 0L71.68 260.096c-8.704-10.24-4.608-18.944 8.704-18.944h863.744z"
								p-id="2571" fill="#FD562D"></path>
						</svg></view>
				</view>
				<text class="del">￥{{price}}元/{{time}}小时</text>
			</view>
			<view class="indent-over center" @click="indentOver">预约并支付</view>
		</view>
		<wyb-popup ref="indentServePopup" type="bottom" height="700" width="500" radius="6" :showCloseIcon="true"
			title="选择服务时长">
			<scroll-view class="popup-content" scroll-y="true">
				<view class="flex center">
					<view class="serveBox-item" :class="{serveBoxItemActive:index==serveIndex}"
						v-for="item,index in serveDataList" :key="index" @click="serveItemClick(index)">
						<view class="fw">
							{{indentTitle}}{{timeCount+index}}小时
						</view>
						<view class="fz">
							{{item.area}}
						</view>
						<view class="">
							<text class="red fw">￥{{(indentDataList[index].price*0.85).toFixed(2)}}</text>
							<text class="line-del fz">￥{{indentDataList[index].price}}</text>
						</view>
					</view>
				</view>
				<view class="serve-sure" @click="serveSureClick">
					确认
				</view>
			</scroll-view>
		</wyb-popup>
		<wyb-popup ref="indentServeTimePopup" type="bottom" height="800" width="500" radius="6" :showCloseIcon="true"
			title="选择服务时间">
			<view>
				<scroll-view scroll-x="true" class="item-mod-scroll">
					<view class="flex time-item-box">
						<view v-for="item,index in indentServeTime" :key="item" class="time-item flex center"
							:class="{timeItemActive:timeIndex==index}" @click="timeItemClick(index)">
							<view class="item-week" :class="{color:timeIndex==index}">
								{{item | getWeek}}
							</view>
							<view class="fz item-time-date" :class="{color:timeIndex==index}">
								{{item | changeTime}}
							</view>
							<view class="red fz">
								{{timeData[index].price}}元起
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="t-time-box">
					<view class="t-time-item"
						:class="[{timeItemOver:item.limit==8},{timeItemNight:item.nightFlag},{timeDateItemActive:timeDateIndex==index}]"
						v-for="item,index in timeData[timeIndex].time" :key="index"
						@click="timesItemClick(index,item.nightFlag,item.flag)">
						{{item.title}}
					</view>
				</view>
				<view class="serve-sure">
					<view class="fz server-sure-hint">
						<text class="fw">温馨提示: </text>
						<text>晚间服务(橙色部分)需要<text class="red">+30</text>元调度费,调度费不参与优惠</text>
					</view>
					<view class="flex">
						<view class="fz">
							<text class="fw">券后</text>
							<text class="red fw s-hint-subprice" v-if="timeFlag">￥{{(subPrice+30).toFixed(2)}}</text>
							<text class="red fw s-hint-subprice" v-else>￥{{subPrice}}</text>
							<text class="red">元{{time}}小时</text>
							<view class="line-del" v-if="timeFlag">
								￥{{price+30}}
							</view>
							<view class="line-del" v-else>
								￥{{price}}
							</view>
						</view>
						<view class="btn-mod" @click="timeSureClick">
							确认
						</view>
					</view>
				</view>
			</view>
		</wyb-popup>
		<wyb-popup ref="userCheckPopup" type="center" height="240" width="500" radius="6" :showCloseIcon="true"
			title="温馨提示">
			<scroll-view class="bottomHintBox" scroll-y="true">
				<view class="fz hintText">
					预定58同城到家精选自营服务需同意
					<text class="color">《用户预约协议》</text>
					的相关条款
				</view>
				<view class="flex center fz">
					<text class="once afterHint" @click="afterHintClick">取消</text>
					<text class="once color" @click="sureHintClick">同意并预约</text>
				</view>
			</scroll-view>
		</wyb-popup>
		<wyb-popup ref="bottomPricePopup" type="bottom" height="500" width="500" radius="6" :showCloseIcon="true"
			zIndex="99" title="费用明细">
			<scroll-view class="bottomPrice-mod" scroll-y="true">
			<view class="fz flex bw marginTop">
				<text class="fw ">{{serveTltle}}</text> 
				<text class="fw">{{price}}</text>
			</view><view class="fz flex bw marginTop">
				<text class="fw ">8.5折优惠券(最高减30.00元)</text> 
				<text class="fw">{{price-subPrice}}</text>
			</view>
			<view class="flex fz marginTop bottomPrice-mod-total">
				<text>
					<text>合计费用</text>
					<text class="red fw">￥{{subPrice}}</text>
				</text>
			</view>
			</scroll-view>
		</wyb-popup>
	</view>
</template>

<script>
	import mapIndent from "./indent.js"
	import wybPopup from '../../components/wyb-popup/wyb-popup.vue'
	export default {
		onLoad(obj) {
			console.log(obj)
			let id = Number(obj.id);
			this.indentIndex = id;
			this.serveIndex = id;
			this.serveTltle = this.serveDataList[id].title;
			this.indentTitle = obj.name;
			this.demandValue = obj.value
			if (!obj.index) {} else {
				this.addressIndex = obj.index
			}
			if (!obj) {
				uni.setNavigationBarTitle({
					title: obj.title
				})
			} else {
				uni.setNavigationBarTitle({
					title: '确认订单'
				})
			}
		},
		data() {
			return {
				//单选状态
				radio_check: false,
				//折扣券选项
				discountData: ['8.5', '9'],
				//优惠券选择
				Sle: false,
				indentIndex: 0, //获取传过来的下标 
				indentTitle: '', //获取标题
				serveIndex: 0, //选择服务下标
				timeCount: 2, //时长默认
				serveTltle: '', //获取传过来的标题
				userDealFlag: false, //底部同意勾选按钮
				//个人数据
				parson: [{
					name: '廖',
					phone: '18030416618',
					address: '成都市高新区孵化园',
					houseNumber: '天赋大道北段1480号',
					date: null,
					time: '',
					price: 0,
					subPrice: 0,
					title: '',
					demandValue: '', //备注默认值
				}],
				addressIndex: 0,
				indentServeTime: [], //日期数组
				timeData: [...mapIndent.timeData], //时间数组
				timeIndex: 0, //时间数组日期下标
				timeDateIndex: null, //时间下标
				timeFlag: false,
				price: 0,
				subPrice: 0,
				allIndentDataList: [], //地址数组
				ALLDataList: [], // 加入订单数组
				bottomPriceFlag: false, // 底部价格点击状态
			}
		},
		components: {
			wybPopup
		},
		created() {
			if (!localStorage.getItem('address')) {
				localStorage.setItem('address', JSON.stringify(this.parson));
			};
			let times = +new Date()
			for (let i = 0; i < 18; i++) {
				this.indentServeTime.push(times)
				times += 86400000
			};
			this.price = this.price2;
			this.subPrice = this.subPrice2;
			if (!localStorage.getItem('address')) {} else {
				let arr = JSON.parse(localStorage.getItem('address'))
				this.ALLDataList = arr
			}
		},
		methods: {
			//选择地址
			GoToSite() {
				uni.navigateTo({
					url: '/pages/indent/children/indentAddress?title=地址管理&id=' + this.indentIndex
				})
			},
			// 更多优惠单选按钮
			radio() {
				this.radio_check = !this.radio_check;
			},
			// 底部同意协议按钮
			hintRadioClick() {
				this.userDealFlag = !this.userDealFlag;
			},
			// 选择服务
			serveClick() {
				this.$refs.indentServePopup.show();
			},
			// 选择服务下标
			serveItemClick(index) {
				this.serveIndex = index;
			},
			// 选择服务确定按钮
			serveSureClick() {
				this.indentIndex = this.serveIndex;
				this.price = this.indentDataList[this.serveIndex].price
				this.subPrice = ((this.indentDataList[this.serveIndex].price) * 0.85).toFixed(2)
				this.serveTltle = this.serveDataList[this.serveIndex].title;
				this.$refs.indentServePopup.hide();
			},
			// 备注
			demandClick() {
				uni.navigateTo({
					url: '/pages/indent/children/indentDemand?title=确认订单&id=' + this.indentIndex
				})
			},
			// 上门时间
			serveTimeClick() {
				this.$refs.indentServeTimePopup.show()
			},
			timeItemClick(index) {
				this.timeDateIndex = null
				this.timeIndex = index
			},
			timesItemClick(index, flag, acFlag) {
				if (acFlag == false) {
					this.timeFlag == acFlag
					this.timeIndex = null
				} else {
					this.timeFlag = flag
					this.timeDateIndex = index
				}
			},
			// 选择时间确定按钮
			timeSureClick() {
				this.parson[0].date = this.indentServeTime[this.timeIndex]
				if (!this.timeData[this.timeIndex].time[this.timeDateIndex].title) {

				} else {
					this.parson[0].time = this.timeData[this.timeIndex].time[this.timeDateIndex].title
				}
				if (this.timeFlag) {
					this.price = (this.price + 30).toFixed(2);
					this.subPrice = Number((this.subPrice + 30).toFixed(2));
				}
				this.$refs.indentServeTimePopup.hide()
			},
			//温馨提示 点击按钮
			afterHintClick() {
				this.$refs.userCheckPopup.hide()
			},
			sureHintClick() {
				this.userDealFlag = true
				this.$refs.userCheckPopup.hide()
			},
			// 提交订单
			indentOver() {
				if (this.parson[0].date == null) {
					this.$refs.indentServeTimePopup.show()
				} else if (this.userDealFlag == false) {
					this.$refs.userCheckPopup.show()
				} else {
					if (!localStorage.getItem('allIndentDataList')) {
						let arr = []
						this.parson[0].price = this.price
						this.parson[0].subPrice = this.subPrice
						this.parson[0].title = this.serveTltle
						this.parson[0].address = this.ALLDataList[this.addressIndex].address
						this.parson[0].houseNumber = this.ALLDataList[this.addressIndex].houseNumber
						arr.push(this.parson[0])
						localStorage.setItem('allIndentDataList', JSON.stringify(arr))
					} else {
						let arr = JSON.parse(localStorage.getItem('allIndentDataList'))
						this.parson[0].price = this.price
						this.parson[0].subPrice = this.subPrice
						this.parson[0].title = this.serveTltle
						this.parson[0].address = this.ALLDataList[this.addressIndex].address
						this.parson[0].houseNumber = this.ALLDataList[this.addressIndex].houseNumber
						arr.push(this.parson[0])
						localStorage.setItem('allIndentDataList', JSON.stringify(arr))
					}
					uni.navigateTo({
						url: '/pages/allIndent/allIndent?title=服务订单'
					})
				}
			},
			bottomPriceClick() {
				this.bottomPriceFlag = !this.bottomPriceFlag
				if (this.bottomPriceFlag) {
					this.$refs.bottomPricePopup.show()
				} else {
					this.$refs.bottomPricePopup.hide()
				}
			}
		},
		computed: {
			//获取渲染数据
			indentDataList() {
				return this.$store.state.indentData;
			},
			//获取选择服务数据
			serveDataList() {
				return this.$store.state.serverData;
			},
			// 原价获取
			price2() {
				return this.indentDataList[this.indentIndex].price;
			},
			// 优惠价获取
			subPrice2() {
				return Number((this.price2 * 0.85).toFixed(2))
			},
			// 时长 
			time() {
				switch (this.indentIndex) {
					case 0:
						return 2;
					case 1:
						return 3;
					case 2:
						return 4;
					default:
						return -1;
				}
			},

		},
		filters: {
			changeTime(val) {
				let date = new Date(val)
				let m = date.getMonth() + 1
				m = m < 10 ? '0' + m : m;
				let d = date.getDate()
				return m + '月' + d + '日'
			},
			getWeek(val) {
				let date = new Date(val)
				let day = new Date(new Date(new Date()).getTime())
				let today = Number(day) + 86400000
				let afterDay = today + 86400000
				let weekData = ['日', '一', '二', '三', '四', '五', '六']
				if (val <= day) {
					return '今天'
				} else if (val <= today) {
					return '明天'
				} else if (val <= afterDay) {
					return '后天'
				} else {
					let week = date.getDay()
					return '星期' + weekData[week]
				}
			},
			changeServeTime(val) {
				let date = new Date(val)
				let m = date.getMonth() + 1
				m = m < 10 ? '0' + m : m;
				let d = date.getDate()
				let weekData = ['日', '一', '二', '三', '四', '五', '六']
				let week = date.getDay()
				return m + '月' + d + '日' + '(周' + weekData[week] + ')'
			}
		}
	}
</script>

<style scoped>

</style>
